<template>
	<view>
		<view class="tui-actionsheet-class tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']">
			<view class="con-box">
				<view class="avatar">
					<image v-if="doctor_info.avatar" :src="doctor_info.avatar" mode="aspectFill"></image>
					<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
				</view>
				<view class="name">{{doctor_info.name}}</view>
				<view class="des">您满意就五星评价吧</view>
				<view class="rate">
					<uni-rate :value="rateVal" @change="rateChange" :size="40" :margin="20" color="#d9d9d9" active-color="#ff6a00" />
				</view>
				<view class="submit" @click="addEvaluate">提交评价</view>
				<view class="yy-safe-bh safe-bg"></view>
				<view class="close" @click="clickClose">
					<text class="iconfont icon-guanbi"></text>
				</view>
			</view>
		</view>
		<view class="tui-actionsheet-mask" :class="[show ? 'tui-mask-show' : '']" @tap="handleClickMask"></view>
	</view>
</template>

<script>
	let app = getApp();

	import {
		getConvDoctorDetail,
		addDoctorEvaluate
	} from '@/api/inquiry.js';

	export default {
		name: "inquiryEvaluate",
		props: {
			//点击遮罩 是否可关闭
			maskCloseAble: {
				type: Boolean,
				default: false
			},
			//显示操作菜单
			show: {
				type: Boolean,
				default: false
			},
			conversationId:{
				type: String|Number,
				default: ''
			}

		},
		components: {

		},
		watch:{
			conversationId(nVal,oVal){
				if(Number(nVal) > 0){
					console.log('==>nVal')
					this.getDoctorDetail();
				}
			}
		},
		data() {
			return {
				doctor_info:{},
				rateVal:0,
				showResAlter:false,
			};
		},
		created() {
			
		},
		mounted() {
			this.getDoctorDetail();
		},
		methods: {
			rateChange(e){
				console.log('rk==>[rate]'+JSON.stringify(e));
				this.rateVal = e.value;
			},
			/**
			 * 获取医生详情
			 */
			getDoctorDetail(){
				if(this.conversationId == '' || this.conversationId == 0){
					return;
				}
				let where = {
					'conversation_id':this.conversationId,
				}
				getConvDoctorDetail(where).then(res => {
					this.doctor_info = res.data[0];
					console.log('rk==>[doctor]'+JSON.stringify(res));
				});
			},
			/**
			 * 评价医生
			 */
			addEvaluate(){
				
				if(this.rateVal <= 0){
					return this.$util.Tips({
						title:'点击选择评价星级'
					})
				}
				this.showResAlter = true;
				this.submitRate(this.rateVal);
			},
			/**
			 * 遮罩点击
			 */
			handleClickMask() {
				if (!this.maskCloseAble) return;
				this.$emit("close");
			},
			/**
			 * 关闭按钮
			 */
			clickClose() {
				// this.$emit("close");
				
				// 默认5星好评
				this.showResAlter = false;
				this.submitRate(5);
			},
			/**
			 * 添加星级
			 */
			submitRate(rate){
				let that = this;
				let where = {
					'doctor_id':that.doctor_info.id,
					'score':rate,
				}
				addDoctorEvaluate(where).then(res => {
					if(res.status == 200){
						if(!that.showResAlter){
							that.$emit("close");
						}else{
							that.$util.Tips({
								title:res.message,
							});
							setTimeout(()=>{
								that.$emit("close");
							},2000);
						}
					}else {
						that.$util.Tips({
							title:res.message,
						})
					}
				})
			}

		}
	};
</script>

<style lang="scss">
	.con-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.close {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			z-index: 99;
			padding: 30rpx;
		}
		.iconfont {
			font-weight: bold;
		}
		.avatar{
			width: 150rpx;
			height: 150rpx;
			border-radius: 150rpx;
			overflow: hidden;
			margin: 50rpx 0 30rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name{
			font-size: $yy-title-big-font;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.des {
			font-size: $yy-title-font;
		}
		.rate {
			margin: 50rpx 0 80rpx;
			padding-left: 20px;
		}
		.submit {
			width: 100%;
			height: 100rpx;
			background-color: $yy-main-col;
			color: #fff;
			font-size: $yy-title-big-font;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.safe-bg{
			width: 100%;
			background-color: $yy-main-col;
		}
	}

	.tui-actionsheet {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 111;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		background: #eaeaec;
		min-height: 100rpx;
	}

	.tui-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>
